<div id="EnvironmentAdmin">
    <nz-card nzTitle="Settings" class="coloredTitle">
        <form nz-form #environmentUpdateFrom="ngForm">
            <nz-form-item>
                <nz-form-label>Name</nz-form-label>
                <nz-form-control>
                    <input nz-input type="text" name="formEnvironmentUpdateName" [(ngModel)]="environment.name" required
                           #formEnvironmentUpdateName="ngModel" pattern="[a-zA-Z0-9._-]*" [disabled]="loading">
                    <nz-alert nzType="error" *ngIf="formEnvironmentUpdateName.invalid && !formEnvironmentUpdateName.pristine">
                        <p>{{'environment_name_error' | translate}}</p>
                    </nz-alert>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item nzJustify="end">
                <button nz-button nzType="primary" (click)="cloneModalVisible = true" type="button" name="clonebtn"
                        [nzLoading]="loading" [disabled]="loading"><i
                        class="copy icon"></i>Clone
                </button>
                <button nz-button nzType="primary" [nzLoading]="loading" name="updateNameButton"
                        (click)="onSubmitEnvironmentUpdate()"
                        [disabled]="environmentUpdateFrom.invalid || environment.from_repository">Rename
                </button>
            </nz-form-item>
        </form>
    </nz-card>
    <nz-card nzTitle="Danger zone" class="redTitle">
        <nz-row>
            <nz-col [nzSpan]="12">
                <div class="title">{{ 'environment_delete_label' | translate}}</div>
                <div class="description">{{ 'environment_delete_description' | translate}}</div>
            </nz-col>
            <nz-col [nzSpan]="12" class="alignRight">
                <button nz-button nzDanger nzType="primary" [nzLoading]="loading"
                        nz-popconfirm (nzOnConfirm)="deleteEnvironment()" nzPopconfirmTitle="Are you sure you want to delete this environment ?">Delete</button>
            </nz-col>
        </nz-row>
    </nz-card>
    <nz-modal nzTitle="{{'environment_title_clone' | translate}} '{{environment.name}}'" [nzVisible]="cloneModalVisible">
        <div *nzModalContent>
            <form nz-form>
                <nz-form-item>
                    <nz-form-label>Name</nz-form-label>
                    <nz-form-control>
                        <input nz-input type="text" name="name" placeholder="{{'environment_clone_placeholder' | translate}}"
                               [(ngModel)]="cloneName">
                    </nz-form-control>
                </nz-form-item>
            </form>
        </div>
        <div *nzModalFooter>
            <button nz-button (click)="cloneModalVisible = false">Cancel</button>
            <button nz-button nzType="primary" [disabled]="!cloneName"
                    [nzLoading]="loading" (click)="cloneEnvironment()">
                <i nz-icon nzType="copy" nzTheme="outline"></i>Clone
            </button>
        </div>
    </nz-modal>
</div>
